import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addShopCarList } from '../../redux/actions/shopcar'
import { nanoid } from 'nanoid'

export class ShopCar extends Component {
  addProduct = () => {
    this.props.addShopCarList({
      id: nanoid(),
      name: '快乐水',
      price: 12,
      num: 1,
    })
  }
  render() {
    let { shopList } = this.props
    return (
      <div>
        <table>
          <thead>
            <tr>
              <td>商品编号</td>
              <td>商品名称</td>
              <td>商品数量</td>
              <td>商品价格</td>
            </tr>
          </thead>
          <tbody>
            {shopList.map((v) => {
              return (
                <tr key={v.id}>
                  <td>{v.id}</td>
                  <td>{v.name}</td>
                  <td>{v.num}</td>
                  <td>{v.price}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
        <button onClick={this.addProduct}>添加商品</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({ shopList: state.shopcar })

const mapDispatchToProps = {
  addShopCarList,
}

export default connect(mapStateToProps, mapDispatchToProps)(ShopCar)
